<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>港约,寻找志同道合</title>
    <link rel="icon" type="image/gif" href="../static/img/xjtu.gif" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- fonticon -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body style="background:url(./static/img/main-bg-compressor.jpg) no-repeat; background-size:cover;">
    <form action="/sign_in" method="POST" id="form1">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-3 column">
                </div>
                <div class="col-md-6 column">
                    <br><br><br>
                    <div class="d-flex flex-column mb-3">
                        <div class="p-2 bg-success text-white">
                            <h2><i class="fa fa-user-plus" aria-hidden="true"></i><strong> 注 册</strong></h2>
                        </div>
                        <div class="p-2 bg-light ">
                            <br>
                            <div class="input-group mb-3 input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                        style="width: 130px; text-align:center;margin-left:auto;margin-right:auto;display:block;">
                                        <i class="fa fa-user-circle "></i> 学 号：
                                    </span>
                                </div>
                                <input type="text" name="userId" id="id" onblur="regexpId();" class="form-control"
                                    placeholder="请输入学号..">
                            </div>
                            <div class="input-group mb-3 input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                        style="width: 130px; text-align:center;margin-left:auto;margin-right:auto;display:block;">
                                        <i class="fa fa-id-card" aria-hidden="true"></i> 姓 名：
                                    </span>
                                </div>
                                <input type="text" name="userName" id="name" class="form-control" placeholder="请输入姓名..">
                            </div>
                            <div class="input-group mb-3 input-group-lg">
                                <div class="input-group-prepend text-center">
                                    <span class="input-group-text"
                                        style="width: 130px; text-align:center;margin-left:auto;margin-right:auto;display:block;">
                                        <i class="fa fa-key fa-fw"></i> 密 码：
                                    </span>
                                </div>
                                <input type="password" name="userPsd" id="pass" class="form-control"
                                    placeholder="请输入密码..">
                            </div>
                            <div class="input-group mb-3 input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                        style="width: 130px; text-align:center;margin-left:auto;margin-right:auto;display:block;">
                                        <i class="fa fa-key fa-fw"></i> 确认：
                                    </span>
                                </div>
                                <input type="password" name="reuserPsd" id="repass" class="form-control"
                                    placeholder="请再次输入密码以确认..">
                            </div>
                        </div>
                        <div class="p-2 bg-dark ">
                            <div class="row clearfix">
                                <div class="col-md-3 column">
                                </div>
                                <div class="col-md-3 column">
                                    <!-- 要为button确定type="button"，默认为type="submit" -->
                                    <button type="button" onclick="checkregister();" class="btn btn-info btn-lg">
                                        <i class="fa fa-user-plus" aria-hidden="true"></i><strong> 注 册</strong>
                                    </button>
                                </div>
                                <div class="col-md-3 column">
                                    <a href="/sign_in" class="btn btn-danger btn-lg" role="button">
                                        <i class="fa fa-mail-reply" aria-hidden="true"></i><strong> 返 回</strong>
                                    </a>
                                </div>
                                <div class="col-md-3 column">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 column">
                </div>
            </div>
        </div>
    </form>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">提 示</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <p id="alerttext">学号、姓名和密码不能为空...</p>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function regexpId() {
            let userId = document.getElementById("id").value;
            // 正则表达式10位数字学号
            const reg = /^[\d]{10}$/;
            let res = reg.test(userId);
            if (!res) {
                document.getElementById("alerttext").innerText = "学号限制为10位数字..."
                $("#myModal").modal();
            }
            return res
        }

        function checkregister() {
            let userId = document.getElementById("id").value;
            let userName = document.getElementById("name").value;
            let userPsd = document.getElementById("pass").value;
            let reuserPsd = document.getElementById("repass").value;
            if (userId == "" || userPsd == "" || userName == "") {
                document.getElementById("alerttext").innerText = "学号、姓名和密码不能为空..."
                $("#myModal").modal();
            } else {
                if (userPsd == reuserPsd && regexpId()) {
                    $.ajax({
                        type: 'POST',
                        url: "/sign_up",
                        data: {
                            Id: userId,
                            Name: userName,
                            Psd: userPsd
                        },
                        cache: false,
                        error: function (err) {
                            document.getElementById("alerttext").innerText = "无法连接到服务器，请稍后再试..."
                            $("#myModal").modal();
                        },
                        success: function (data) {
                            if (data == "User id has exist") {
                                document.getElementById("alerttext").innerText = "该学号已经被注册了..."
                                $("#myModal").modal();
                            } else if (data == "Register success") {
                                document.getElementById("alerttext").innerText = "注册成功，前往登录..."
                                $("#myModal").modal();
                                setTimeout(function () {
                                    window.location.href = 'sign_in';
                                }, 2000);
                            }
                        }
                    });
                } else if (userPsd != reuserPsd) {
                    document.getElementById("alerttext").innerText = "两次输入密码不一致..."
                    $("#myModal").modal();
                }
            }
        }
    </script>
</body>

</html>